// Copyright 2019 The rhyme_lph Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// L [author] rhyme_lph
// h [email]  rhymelph@gmail.com
// V [github] https://github.com/rhymelph

import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_spaces.dart';
import 'package:finance_app/src/entities/setting_template_entity.dart';
import 'package:finance_app/src/provider/setting/preference/template_style_provider.dart';
import 'package:finance_app/src/router_gen/router_meta.dart';
import 'package:finance_app/src/utils/form_utils.dart';
import 'package:finance_app/src/utils/language_utils.dart';
import 'package:finance_app/src/widgets/common_app_bar.dart';
import 'package:finance_app/src/widgets/list_item/template_list_item.dart';
import 'package:finance_app/src/widgets/pop/normal_border_pop.dart';
import 'package:flutter/material.dart';
import 'package:tuple/tuple.dart';

@RouterMeta(paramName: "templateStylePage")
class TemplateStylePage extends StatefulWidget {
  @override
  _TemplateStylePageState createState() => _TemplateStylePageState();
}

class _TemplateStylePageState extends State<TemplateStylePage>
    with PagePresenter<TemplateStylePage, TemplateStyleProvider> {
  @override
  PreferredSizeWidget get appBar =>
      getDefaultAppBar(title: S.current.template_style);

  @override
  Widget get buildWidget => ColoredBox(
        color: Colors.white,
        child: Column(
          children: [
            AppSpaces.h20,
            listBuilder<String>(
                selector: (_, __) => __.currentType,
                builder: (BuildContext context, String value, Widget child) =>
                    NormalBorderPop<String>(
                      buildDisplayName: (e) => LanguageUtils.translateFilter(e),
                      select: provider.currentType,
                      group: provider.templateList,
                      onSelect: provider.onChangeTemplate,
                    )),
            AppSpaces.h20,
            Expanded(
                child: listBuilder<Tuple2<String, List<SettingTemplateEntity>>>(
              selector: (_, __) => Tuple2(
                  __.getCurrentSelect(),
                  __.data
                      .where((element) =>
                          element.type ==
                          FormUtils.recoveryToKey(__.currentType))
                      .toList()),
              builder: (BuildContext context,
                      Tuple2<String, List<SettingTemplateEntity>> value,
                      Widget child) =>
                  GridView(
                padding: EdgeInsets.symmetric(
                  horizontal: 19,
                ),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    childAspectRatio: 157 / 223,
                    crossAxisCount: 2,
                    crossAxisSpacing: getDp(10),
                    mainAxisSpacing: getDp(30)),
                children: List.generate(
                    3,
                    (index) => TemplateListItem(
                          isSelect: value.item1 == value.item2[index].template,
                          url: value.item2[index].imageUrl,
                          onSelect: () =>
                              provider.onSelect(value.item2[index].template),
                          onWatch: () => provider.onWatch(value.item2[index]),
                        )),
              ),
            )),
          ],
        ),
      );
}
